<template>
	<view class="container">
		<top-bar2 style="width: calc(100% - 80px);"></top-bar2>
		<view class="illustrations"><image src="../../static/illustrations/e9176e41bf56aea316c8c6de746d9f5@3x.png"></image></view>
		<view class="card-info flex-clo flex-sc">
			<view class="header-image">
				<image :src="data.headerImg"></image>
			</view>
			<view class="info">
				<view class="title flex-cc"><span>个人简介</span></view>
				<view class="detail-area">{{ data.detail }}</view>
				<view class="opera-area">
					<span style="margin-right: 20rpx">今日能量数据</span>
					<i class="flex-cc"><image src="../../static/icons/Iconly-Light-Arrow-Right2.png"></image></i>
				</view>
			</view>
		</view>
		<tab-bar></tab-bar>
	</view>
</template>

<script>
import topBar2 from '../../components/topBar2/topBar2.vue';
export default {
	components: {
		topBar2
	},
	data() {
		return {
			data: {
				headerImg:'../../static/illustrations/avtar1.png',
				detail: '     三星米其林餐厅转业，沙拉、海鲜、甜品、汤饮都超有料！每日减脂、营养、美味、高颜值轻食分享，关注我，不错过~'
			}
		};
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	background: $-color-theme-5;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	overflow: hidden;
	.illustrations {
		width: 100%;
		image {
			width: 700rpx;
			height: 670rpx;
		}
	}
	.card-info {
		font-family: 'PingFang SC';
		position: absolute;
		top: 880rpx;
		width: 100%;
		height: 50%;
		background: linear-gradient(to bottom, $-color-theme-3, $-color-theme-1);
		border-radius: 40px 40px 0 0;
		.header-image{
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			margin-top: 40rpx;
			margin-bottom: 20rpx;
			image{
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
			}
		}
		.info {
			width: 470rpx;
			height: 440rpx;
			border-radius: 40px;
			background: $-color-theme-1;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-direction: column;
			.title {
				margin-top: 50rpx;
				margin-bottom: 36rpx;
				border: 2rpx solid $-color-theme-3;
				border-radius: 50px;
				span {
					color: #636363;
					font-size: 12px;
					padding: 6rpx 40rpx;
				}
			}
			.detail-area {
				width: calc(100% - 110rpx);
				font-size: 12px;
				text-indent: 2em;
				letter-spacing: 5rpx;
				margin-bottom: 40rpx;
			}
			.opera-area{
				margin-bottom: 40rpx;
				background: $-color-theme-3;
				font-size: 12px;
				border-radius: 50px;
				padding: 6rpx 30rpx;
				display: flex;
				color: #FFFFFF;
				justify-content: space-around;
				align-items: center;
				image{
					width: 12px;
					height: 12px;
				}
			}
		}
	}
}
</style>
